<template>
  <div>
    <van-nav-bar
      :title="$route.name"
      @click-left="$router.back()"
      left-text="返回"
      left-arrow
    />
    <!-- 购物车的视图分为有数据和无数据 -->
    <!-- 有数据 -->
    <div v-if="cartlist.length > 0">
      <van-swipe-cell v-for="item in cartlist" :key="item.id">
        <div class="wrap">
          <van-checkbox
            v-model="item.checked"
            :key="item.id"
            @click="checkOne">
          </van-checkbox>
          <van-card
            :num="item.num"
            :price="item.price | toPrice"
            desc="描述信息"
            :title="item.goodsname"
            class="goods-card"
            :thumb="item.img">
            <template #footer>
            <van-stepper
              @plus="handleNum(item, 2)"
              @minus="handleNum(item, 1)"
              v-model="item.num"
              theme="round"
              button-size="22"
              disable-input
            /> 
            </template>     
          </van-card>
        </div>
        <template #right>
          <van-button
            @click="del(item.id)"
            square
            text="删除"
            type="danger"
            class="delete-button btnInfo"
          />
        </template>
      </van-swipe-cell>

<van-submit-bar
  :price="total * 100"
  button-text="提交订单"
  @submit="onSubmit"
  :decimal-length="0"
>
<van-checkbox
  v-model="allchecked"
  @click="checkAll"
  >
  全选
</van-checkbox>

</van-submit-bar>
    </div>
    <!-- 无数据状态 -->
    <div v-else>
      <van-empty description="购物车空空如也" />
    </div>
  </div>
</template>

<script>
import {Toast} from 'vant'
import { cartList, deleteCart, cartEdit } from '../request/api'

export default {
  data() {
    return {
      allchecked: false,
      cartlist: [],
    }
  },
  computed: {
    total() {
      let sum = 0
      this.cartlist.map(item =>{
          if(item.checked){
            sum += item.price * item.num
          }
      })
      return sum
    }
  },
  beforeRouteEnter(to, from, next) {
    if (sessionStorage.getItem("userinfo")) {
      next();
    } else {
      //无登录状态，强制调转到登录页
      next("/login");
    }
  },
  mounted() {
    cartList({
      uid: this.$store.getters.getUser.uid,
    }).then((res) => {
      if (res.data.code == 200) {
        this.cartlist = res.data.list?res.data.list:[];
        this.cartlist = this.cartlist.map(item => {
          return {...item,
          checked:false}
        })
      }
    })
  },
  methods: {
    del(id) {
      deleteCart({ id }).then((res) => {
          if(res.data.code==200){
              Toast.success(res.data.msg)
              location.reload()
          }else{
              Toast.fail(res.data.msg)
          }
      })
    },
    handleNum(item, type) {
      cartEdit({ id:item.id, type }).then(res => {
          
      })
    },
    checkOne() {
      this.allchecked = this.cartlist.every((item) => item.checked);
    },
    checkAll() {
      this.cartlist.map((item) => {
        item.checked = this.allchecked;
      });
    },
    onSubmit() {
      let idstr = []
      let countnumber = 0
      let list = this.cartlist.filter((item) => item.checked)
      list.map(item =>{
        countnumber += item.num
        idstr.push(item.id)
      })
      this.$router.push({
        path: '/order',
        query: {
          countnumber,
          countmoney:this.total,
          idstr:idstr.join(',')
        }
      })
    }
  }
}
</script>

<style scoped>
.btnInfo {
  height: 100%;
}

.wrap {
  display: flex;
}

.goods-card {
  flex: 1;
}

.van-submit-bar {
  margin-bottom: 50px;
}

</style>
